<template>
  <div class="app-container">
    <el-card :body-style="{ padding: '20px' }">
      <div>订单详情</div>
    </el-card>
    <div style="margin-top: 10px">
      <el-card :body-style="{ padding: '20px' }">
        <!-- <el-steps :active="logList.length">
          <el-step
            title="买家下单"
            :description="logList[0] ? logList[0].createTime : '--'"
          ></el-step>
          <el-step
            title="买家付款"
            :description="logList[1] ? logList[1].createTime : '--'"
          ></el-step>
          <el-step
            title="商家发货"
            :description="logList[2] ? logList[2].createTime : '--'"
          ></el-step>
          <el-step
            title="交易完成"
            :description="logList[3] ? logList[3].createTime : '--'"
          ></el-step>
        </el-steps> -->

        <el-steps :active="logList.length">
          <el-step
            v-for="(item, index) in logList"
            :key="index"
            :title="statusList[item.orderStatus]"
            :description="item.createTime ? item.createTime : '--'"
          ></el-step>
        </el-steps>
      </el-card>
    </div>

    <div style="margin-top: 10px">
      <el-row :gutter="10">
        <el-col :span="8" :offset="0">
          <el-card :body-style="{ padding: '20px', height: '30vh' }">
            <div slot="header" class="clearfix">
              <span>订单信息</span>
            </div>
            <el-row class="my-card">
              <el-col :span="24">
                <!-- 1待发货，2配送中，3待收货，4已完成,5已退单,6已关闭 -->
                <div class="card-col">
                  <span class="space">订单状态</span>
                  {{ forrmatterEnmu(orderStatus, detailInfo.orderStatus) }}
                </div>
              </el-col>
              <el-col :span="24">
                <div class="card-col">
                  <span class="space">订单编号</span>{{ detailInfo.id }}
                </div>
              </el-col>
              <el-col :span="24">
                <div class="card-col">
                  <span class="space">交易单号</span>{{ detailInfo.outTradeNo }}
                </div>
              </el-col>
              <el-col :span="24">
                <!-- 1普通订单 2 -->
                <div class="card-col">
                  <span class="space">订单类型</span
                  >{{ detailInfo.orderType == 1 ? "商城订单" : "云库存订单" }}
                </div>
              </el-col>
              <el-col :span="24">
                <!-- 支付方式 1余额支付 2第三方 3云库存提货 -->
                <div class="card-col">
                  <span class="space">支付方式</span
                  >{{ forrmatterEnmu(payType, detailInfo.payType) }}
                </div>
              </el-col>
              <!-- <el-col :span="24">
                <div class="card-col">
                  <span class="space">卖家备注</span
                  >{{ detailInfo.remark || "--" }}
                  <el-button type="text" size="mini" @click="remarkHandler(1)"
                    >备注</el-button
                  >
                </div>
              </el-col>
              <el-col :span="24">
                <div class="card-col">
                  <span class="space">卖家留言</span
                  >{{ detailInfo.remark || "--" }}
                  <el-button type="text" size="mini" @click="remarkHandler"
                    >留言</el-button
                  >
                </div>
              </el-col> -->
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-card :body-style="{ padding: '20px', height: '30vh' }">
            <div slot="header" class="clearfix">
              <span>买家及收货信息</span>
            </div>
            <el-row class="my-card">
              <el-col :span="24">
                <div class="card-col">
                  <span class="space">买家</span> {{ detailInfo.userName }}
                </div>
              </el-col>
              <el-col :span="24">
                <div class="card-col">
                  <span class="space">买家备注</span
                  >{{ detailInfo.receiveRemark || "--" }}
                </div>
              </el-col>
              <el-col :span="24">
                <!-- 1普通配送，2加急配送 -->
                <div class="card-col">
                  <span class="space">配送方式</span
                  >{{ detailInfo.deliveryType == 1 ? "普通配送" : "加急配送" }}
                </div>
              </el-col>
              <el-col :span="24">
                <div class="card-col">
                  <span class="space">收货人</span>{{ detailInfo.receiveName }}
                </div>
              </el-col>
              <el-col :span="24">
                <div class="card-col">
                  <span class="space">收货地址 </span
                  >{{ detailInfo.receiveAddress }}
                </div>
              </el-col>
              <el-col :span="24">
                <div class="card-col">
                  <span class="space">手机号码</span
                  >{{ detailInfo.receivePhonenum }}
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-card :body-style="{ padding: '20px', height: '30vh' }">
            <div slot="header" class="clearfix">
              <span>结算信息</span>
            </div>
            <el-row class="my-card">
              <el-col :span="24">
                <div class="card-col">
                  <span class="space">商品小计 </span> ￥{{
                    detailInfo.payMoney
                  }}
                </div>
              </el-col>
              <el-col :span="24">
                <div class="card-col">
                  <span class="space">运费 </span>￥{{
                    detailInfo.deliveryCost
                  }}
                </div>
              </el-col>
              <el-col :span="24">
                <div class="card-col">
                  <span class="space">积分抵扣 </span>-￥{{
                    detailInfo.deductIntegral
                  }}
                </div>
              </el-col>
              <!-- <el-col :span="24">
                <div class="card-col"><span class="space">随机减 </span>￥接口没字段</div>
              </el-col> -->
              <!-- <el-col :span="24">
                <div class="card-col"><span class="space">实付款 </span>￥{{ detailInfo.payMoney }}</div>
              </el-col> -->
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 商品信息 -->
    <div style="margin-top: 10px">
      <el-card :body-style="{ padding: '20px' }">
        <div slot="header" class="clearfix">
          <span>商品信息</span>
        </div>
        <goods-info :dataList="goodsInfo"></goods-info>
      </el-card>
    </div>
    <!-- 物流包裹 -->
    <div style="margin-top: 10px" v-if="detailInfo.orderStatus >= 2">
      <el-card :body-style="{ padding: '20px' }">
        <div slot="header" class="clearfix">
          <span>物流包裹</span>
        </div>
        <Logistics :info="detailInfo" :list="goodsInfo"></Logistics>
      </el-card>
    </div>
    <!-- 订单操作日志 -->
    <div style="margin-top: 10px">
      <el-card :body-style="{ padding: '20px' }">
        <div slot="header" class="clearfix">
          <span>订单操作日志</span>
        </div>
        <order-log :orderId="detailInfo.orderId"></order-log>
      </el-card>
    </div>
    <div style="margin-top: 10px" v-if="detailInfo.orderStatus < 2">
      <el-card :body-style="{ padding: '20px' }">
        <el-button type="primary" size="nomale" @click="expressShow = true"
          >发货</el-button
        >
      </el-card>
    </div>

    <!-- 基本信息 -->
    <el-dialog title="基本信息" :visible.sync="expressShow" width="70%">
      <express-info
        @close="close"
        :info="detailInfo"
        :list="goodsInfo"
      ></express-info>
    </el-dialog>

    <!-- 留言/备注 -->
    <el-dialog :title="remarkTitle" :visible.sync="remarkOpen" width="30%">
      <el-form :model="remarkForm" ref="form" label-width="80px">
        <el-form-item :label="remarkTitle">
          <el-input v-model="remarkForm.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="remarkOpen = false">取消</el-button>
        <el-button type="primary" @click="remarkEmit">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getItem, shipmentsList } from "@/api/system/order/manage";
import { forrmatterEnmu } from "@/utils/index";
import GoodsInfo from "./components/goodsInfo.vue";
import OrderLog from "./components/orderLog.vue";
import Logistics from "./components/logistics.vue";
import ExpressInfo from "./components/expressInfo.vue";
export default {
  components: {
    GoodsInfo,
    OrderLog,
    Logistics,
    ExpressInfo,
  },
  props: {},
  data() {
    return {
      expressShow: false,
      remarkTitle: null,
      remarkOpen: null,
      remarkForm: {},
      detailInfo: {},
      /**
       * 订单状态：1待发货，2配送中，3待收货，4已完成,5已退单,6已关闭
       */
      orderStatus: [
        {
          name: "待发货",
          value: 1,
        },
        {
          name: "配送中",
          value: 2,
        },
        {
          name: "待收货",
          value: 3,
        },
        {
          name: "已完成",
          value: 4,
        },
        {
          name: "已退单",
          value: 5,
        },
        {
          name: "已关闭",
          value: 6,
        },
      ],
      /**
       * 支付方式： 1余额支付 2第三方 3云库存提货
       */
      payType: [
        {
          name: "余额支付",
          value: 1,
        },
        {
          name: "第三方",
          value: 2,
        },
        {
          name: "云库存提货",
          value: 3,
        },
      ],
      goodsInfo: [],
      logList: [],

      statusList: [
        "",
        "买家下单",
        "买家付款",
        "商家发货",
        "交易完成",
        "订单关闭",
        "用户退单",
        "等待平台处理",
        "退单成功",
        "用户取消退单",
        "平台职消退单",
      ],
    };
  },
  mounted() {
    this.getDetail();
    this.getLogList();
  },
  methods: {
    forrmatterEnmu,
    getDetail() {
      getItem(this.$route.query.id).then((res) => {
        this.detailInfo = res.data;
        this.goodsInfo = res.data.appletBdmOrderItemVos.map((item) => {
          item.orderStatus = res.data.orderStatus;
          item.payMoney = res.data.payMoney;
          return item;
        });
      });
    },
    close() {
      this.expressShow = false;
      this.getLogList();
    },
    /**查询日志 */
    getLogList() {
      shipmentsList(this.$route.query.id).then((res) => {
        this.logList = [...res.rows];
      });
    },
    submit() {},
    remarkEmit() {},
    remarkHandler(type) {
      if (type) {
        this.remarkTitle = "备注";
      } else {
        this.remarkTitle = "留言";
      }
      this.remarkOpen = true;
    },
  },
};
</script>

<style lang="less" scoped>
.my-card {
  font-size: 13px;
  padding: 0 15px;

  .card-col {
    margin: 10px 0;

    .space {
      display: inline-block;
      width: 80px;
      text-align: right;
      margin-right: 14px;
    }
  }
}
</style>
